<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础分类 - XHH 管理器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #1a1a1a;
            color: #ffffff;
            line-height: 1.6;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px 0;
            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: white;
        }

        .nav {
            display: flex;
            gap: 20px;
        }

        .nav-item {
            color: white;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 6px;
            transition: all 0.3s ease;
        }

        .nav-item:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .nav-item.active {
            background: rgba(255, 255, 255, 0.3);
        }

        .main-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .page-title {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 16px;
            text-align: center;
        }

        .page-subtitle {
            font-size: 16px;
            color: #888;
            text-align: center;
            margin-bottom: 40px;
        }

        .category-tabs {
            display: flex;
            gap: 12px;
            margin-bottom: 30px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .tab-btn {
            background: #333;
            border: 1px solid #555;
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .tab-btn:hover {
            background: #444;
            border-color: #667eea;
        }

        .tab-btn.active {
            background: #667eea;
            border-color: #667eea;
        }

        .category-content {
            display: none;
        }

        .category-content.active {
            display: block;
        }

        .subcategory-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .subcategory-card {
            background: #2a2a2a;
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #333;
            transition: all 0.3s ease;
        }

        .subcategory-card:hover {
            border-color: #667eea;
            transform: translateY(-2px);
        }

        .subcategory-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 12px;
            color: #ffffff;
        }

        .subcategory-description {
            color: #888;
            margin-bottom: 16px;
            font-size: 14px;
        }

        .items-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 12px;
        }

        .item-card {
            background: #333;
            border-radius: 8px;
            padding: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid #444;
        }

        .item-card:hover {
            background: #444;
            border-color: #667eea;
        }

        .item-card.selected {
            background: #667eea;
            border-color: #667eea;
        }

        .item-name {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 4px;
        }

        .item-description {
            font-size: 12px;
            color: #888;
        }

        .prompt-preview {
            background: #2a2a2a;
            border-radius: 12px;
            padding: 20px;
            margin-top: 30px;
            border: 1px solid #333;
        }

        .prompt-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 16px;
        }

        .prompt-content {
            background: #333;
            border-radius: 8px;
            padding: 16px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 16px;
        }

        .model-buttons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .model-btn {
            background: #444;
            border: 1px solid #555;
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .model-btn:hover {
            background: #555;
            border-color: #667eea;
        }

        .model-btn.active {
            background: #667eea;
            border-color: #667eea;
        }

        .generate-section {
            background: #2a2a2a;
            border-radius: 12px;
            padding: 20px;
            margin-top: 30px;
            border: 1px solid #333;
        }

        .generate-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 16px;
        }

        .generate-controls {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .generate-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .generate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }

        .generate-btn:disabled {
            background: #666;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .results-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .result-card {
            background: #333;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #444;
        }

        .result-image {
            width: 100%;
            height: 200px;
            background: #444;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #888;
        }

        .result-info {
            padding: 12px;
        }

        .result-model {
            font-size: 12px;
            color: #667eea;
            font-weight: bold;
            margin-bottom: 4px;
        }

        .result-prompt {
            font-size: 12px;
            color: #888;
        }

        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 16px;
            }

            .nav {
                flex-wrap: wrap;
                justify-content: center;
            }

            .subcategory-grid {
                grid-template-columns: 1fr;
            }

            .items-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="header-content">
            <div class="logo">🏷️ 基础分类</div>
            <nav class="nav">
                <a href="/xhh/manager/index.html" class="nav-item">首页</a>
                <a href="/xhh/prompt-manager" class="nav-item">提示词管理</a>
                <a href="/xhh/lora-manager" class="nav-item">LoRA管理</a>
                <a href="/xhh/manager/categories.html" class="nav-item active">基础分类</a>
            </nav>
        </div>
    </header>

    <main class="main-content">
        <h1 class="page-title">基础分类管理</h1>
        <p class="page-subtitle">为不同AI模型提供标准化的提示词分类</p>

        <div class="category-tabs">
            <button class="tab-btn active" data-category="clothing">服装</button>
            <button class="tab-btn" data-category="underwear">内衣</button>
            <button class="tab-btn" data-category="hairstyle">发型</button>
            <button class="tab-btn" data-category="shoes">鞋类</button>
            <button class="tab-btn" data-category="height">身高</button>
            <button class="tab-btn" data-category="body">体型</button>
            <button class="tab-btn" data-category="bags">包包</button>
            <button class="tab-btn" data-category="accessories">配饰</button>
        </div>

        <div id="categoryContent">
            <!-- 分类内容将通过JavaScript动态加载 -->
        </div>

        <div class="prompt-preview" id="promptPreview" style="display: none;">
            <h3 class="prompt-title">提示词预览</h3>
            <div class="prompt-content" id="promptContent"></div>
            <div class="model-buttons">
                <button class="model-btn" data-model="flux">Flux</button>
                <button class="model-btn" data-model="qwen">Qwen</button>
                <button class="model-btn" data-model="sdxl">SDXL</button>
                <button class="model-btn" data-model="wan">Wan</button>
            </div>
        </div>

        <div class="generate-section" id="generateSection" style="display: none;">
            <h3 class="generate-title">模型测试</h3>
            <div class="generate-controls">
                <button class="generate-btn" id="generateBtn">生成测试图片</button>
                <button class="generate-btn" id="batchGenerateBtn">批量生成</button>
            </div>
            <div class="results-grid" id="resultsGrid">
                <!-- 生成结果将显示在这里 -->
            </div>
        </div>
    </main>

    <script>
        class CategoryManager {
            constructor() {
                this.currentCategory = 'clothing';
                this.selectedItems = [];
                this.currentModel = 'flux';
                this.categories = {};
                
                this.init();
            }

            async init() {
                console.log("🏷️ 基础分类管理器初始化");
                this.setupEventListeners();
                await this.loadCategories();
                await this.renderCategoryContent();
            }

            setupEventListeners() {
                // 分类标签切换
                document.querySelectorAll('.tab-btn').forEach(btn => {
                    btn.addEventListener('click', async (e) => {
                        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
                        e.target.classList.add('active');
                        this.currentCategory = e.target.dataset.category;
                        await this.renderCategoryContent();
                    });
                });

                // 模型按钮
                document.querySelectorAll('.model-btn').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        document.querySelectorAll('.model-btn').forEach(b => b.classList.remove('active'));
                        e.target.classList.add('active');
                        this.currentModel = e.target.dataset.model;
                        this.updatePromptPreview();
                    });
                });

                // 生成按钮
                document.getElementById('generateBtn').addEventListener('click', () => {
                    this.generateImage();
                });

                document.getElementById('batchGenerateBtn').addEventListener('click', () => {
                    this.batchGenerate();
                });
            }

            async loadCategories() {
                try {
                    console.log("🏷️ 加载分类数据");
                    const response = await fetch('/api/xhh/categories');
                    const data = await response.json();
                    
                    if (data.success) {
                        this.categories = data.data;
                        console.log("🏷️ 分类数据加载成功:", this.categories);
                    } else {
                        console.error("❌ 加载分类数据失败:", data.message);
                        // 使用默认分类数据
                        this.categories = await this.getDefaultCategories();
                    }
                } catch (error) {
                    console.error("❌ 加载分类数据错误:", error);
                    // 使用默认分类数据
                    this.categories = await this.getDefaultCategories();
                }
            }

            async getDefaultCategories() {
                try {
                    // 尝试从JSON文件加载默认分类数据
                    const response = await fetch('/api/xhh/categories');
                    const data = await response.json();
                    if (data.success && data.data) {
                        return data.data;
                    }
                } catch (error) {
                    console.error("加载默认分类数据失败:", error);
                }
                
                // 如果API失败，返回基本的默认数据
                return {
                    clothing: {
                        name: "服装",
                        description: "各种服装类型和款式",
                        subcategories: {
                            tops: {
                                name: "上装",
                                description: "上衣类服装",
                                items: [
                                    { name: "衬衫", description: "shirt", prompt_cn: "衬衫", prompt_en: "shirt" },
                                    { name: "吊带", description: "tank top", prompt_cn: "吊带背心", prompt_en: "tank top" },
                                    { name: "背心", description: "vest", prompt_cn: "背心", prompt_en: "vest" },
                                    { name: "T恤", description: "t-shirt", prompt_cn: "T恤", prompt_en: "t-shirt" },
                                    { name: "毛衣", description: "sweater", prompt_cn: "毛衣", prompt_en: "sweater" },
                                    { name: "卫衣", description: "hoodie", prompt_cn: "卫衣", prompt_en: "hoodie" }
                                ]
                            },
                            bottoms: {
                                name: "下装",
                                description: "下装类服装",
                                items: [
                                    { name: "牛仔裤", description: "jeans", prompt_cn: "牛仔裤", prompt_en: "jeans" },
                                    { name: "短裤", description: "shorts", prompt_cn: "短裤", prompt_en: "shorts" },
                                    { name: "长裤", description: "pants", prompt_cn: "长裤", prompt_en: "pants" },
                                    { name: "运动裤", description: "sweatpants", prompt_cn: "运动裤", prompt_en: "sweatpants" }
                                ]
                            },
                            dresses: {
                                name: "裙装",
                                description: "连衣裙和半身裙",
                                items: [
                                    { name: "连衣裙", description: "dress", prompt_cn: "连衣裙", prompt_en: "dress" },
                                    { name: "半身裙", description: "skirt", prompt_cn: "半身裙", prompt_en: "skirt" },
                                    { name: "短裙", description: "mini skirt", prompt_cn: "短裙", prompt_en: "mini skirt" },
                                    { name: "长裙", description: "long skirt", prompt_cn: "长裙", prompt_en: "long skirt" }
                                ]
                            },
                            outerwear: {
                                name: "外套",
                                description: "外套类服装",
                                items: [
                                    { name: "夹克", description: "jacket", prompt_cn: "夹克", prompt_en: "jacket" },
                                    { name: "风衣", description: "trench coat", prompt_cn: "风衣", prompt_en: "trench coat" },
                                    { name: "羽绒服", description: "down jacket", prompt_cn: "羽绒服", prompt_en: "down jacket" },
                                    { name: "西装", description: "suit", prompt_cn: "西装", prompt_en: "suit" }
                                ]
                            }
                        }
                    },
                    hairstyle: {
                        name: "发型",
                        description: "各种发型类型",
                        subcategories: {
                            length: {
                                name: "长度",
                                description: "头发长度分类",
                                items: [
                                    { name: "长发", description: "long hair", prompt_cn: "长发", prompt_en: "long hair" },
                                    { name: "短发", description: "short hair", prompt_cn: "短发", prompt_en: "short hair" },
                                    { name: "中发", description: "medium hair", prompt_cn: "中发", prompt_en: "medium hair" }
                                ]
                            },
                            style: {
                                name: "发型",
                                description: "发型样式",
                                items: [
                                    { name: "直发", description: "straight hair", prompt_cn: "直发", prompt_en: "straight hair" },
                                    { name: "卷发", description: "curly hair", prompt_cn: "卷发", prompt_en: "curly hair" },
                                    { name: "波浪发", description: "wavy hair", prompt_cn: "波浪发", prompt_en: "wavy hair" }
                                ]
                            }
                        }
                    },
                    shoes: {
                        name: "鞋类",
                        description: "各种鞋类",
                        subcategories: {
                            type: {
                                name: "类型",
                                description: "鞋类类型",
                                items: [
                                    { name: "高跟鞋", description: "high heels", prompt_cn: "高跟鞋", prompt_en: "high heels" },
                                    { name: "运动鞋", description: "sneakers", prompt_cn: "运动鞋", prompt_en: "sneakers" },
                                    { name: "凉鞋", description: "sandals", prompt_cn: "凉鞋", prompt_en: "sandals" },
                                    { name: "靴子", description: "boots", prompt_cn: "靴子", prompt_en: "boots" }
                                ]
                            }
                        }
                    }
                };
            }

            async renderCategoryContent() {
                const content = document.getElementById('categoryContent');
                console.log("🏷️ 渲染分类内容，当前分类:", this.currentCategory);
                console.log("🏷️ 可用分类:", Object.keys(this.categories));
                const category = this.categories[this.currentCategory];
                
                if (!category) {
                    console.log("🏷️ 未找到分类数据，使用默认分类");
                    this.categories = await this.getDefaultCategories();
                    const defaultCategory = this.categories[this.currentCategory];
                    if (!defaultCategory) {
                        content.innerHTML = '<div style="text-align: center; color: #888; padding: 40px;">暂无分类数据</div>';
                        return;
                    }
                    this.renderCategoryHTML(defaultCategory);
                    return;
                }
                
                this.renderCategoryHTML(category);
            }
            
            renderCategoryHTML(category) {
                const content = document.getElementById('categoryContent');

                let html = `
                    <div class="category-content active">
                        <h2 style="font-size: 24px; margin-bottom: 16px;">${category.name}</h2>
                        <p style="color: #888; margin-bottom: 30px;">${category.description}</p>
                `;

                // 渲染子分类
                for (const [subKey, subcategory] of Object.entries(category.subcategories)) {
                    html += `
                        <div class="subcategory-card">
                            <h3 class="subcategory-title">${subcategory.name}</h3>
                            <p class="subcategory-description">${subcategory.description}</p>
                            <div class="items-grid">
                    `;

                    subcategory.items.forEach(item => {
                        html += `
                            <div class="item-card" data-item='${JSON.stringify(item)}'>
                                <div class="item-name">${item.name}</div>
                                <div class="item-description">${item.description}</div>
                            </div>
                        `;
                    });

                    html += `
                            </div>
                        </div>
                    `;
                }

                html += '</div>';
                content.innerHTML = html;

                // 添加项目点击事件
                content.querySelectorAll('.item-card').forEach(card => {
                    card.addEventListener('click', (e) => {
                        const item = JSON.parse(e.currentTarget.dataset.item);
                        this.selectItem(item, e.currentTarget);
                    });
                });
            }

            selectItem(item, element) {
                // 切换选中状态
                if (element.classList.contains('selected')) {
                    element.classList.remove('selected');
                    this.selectedItems = this.selectedItems.filter(i => i.name !== item.name);
                } else {
                    element.classList.add('selected');
                    this.selectedItems.push(item);
                }

                this.updatePromptPreview();
            }

            updatePromptPreview() {
                if (this.selectedItems.length === 0) {
                    document.getElementById('promptPreview').style.display = 'none';
                    document.getElementById('generateSection').style.display = 'none';
                    return;
                }

                document.getElementById('promptPreview').style.display = 'block';
                document.getElementById('generateSection').style.display = 'block';

                // 生成提示词
                let prompt = '';
                this.selectedItems.forEach(item => {
                    if (this.currentModel === 'flux') {
                        prompt += item.prompt_en + ', ';
                    } else {
                        prompt += item.prompt_cn + ', ';
                    }
                });

                prompt = prompt.slice(0, -2); // 去掉最后的逗号和空格

                document.getElementById('promptContent').textContent = prompt;
            }

            async generateImage() {
                if (this.selectedItems.length === 0) {
                    alert('请先选择项目');
                    return;
                }

                const generateBtn = document.getElementById('generateBtn');
                generateBtn.disabled = true;
                generateBtn.textContent = '生成中...';

                try {
                    const prompt = document.getElementById('promptContent').textContent;
                    const response = await fetch('/api/xhh/generate-image', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            prompt: prompt,
                            model: this.currentModel,
                            items: this.selectedItems
                        })
                    });

                    const result = await response.json();
                    
                    if (result.success) {
                        this.displayResult(result.data);
                    } else {
                        alert('生成失败: ' + result.message);
                    }
                } catch (error) {
                    console.error('生成图片失败:', error);
                    alert('生成图片时发生错误');
                } finally {
                    generateBtn.disabled = false;
                    generateBtn.textContent = '生成测试图片';
                }
            }

            async batchGenerate() {
                if (this.selectedItems.length === 0) {
                    alert('请先选择项目');
                    return;
                }

                const models = ['flux', 'qwen', 'sdxl', 'wan'];
                const batchBtn = document.getElementById('batchGenerateBtn');
                batchBtn.disabled = true;
                batchBtn.textContent = '批量生成中...';

                try {
                    const prompt = document.getElementById('promptContent').textContent;
                    const results = [];

                    for (const model of models) {
                        const response = await fetch('/api/xhh/generate-image', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                prompt: prompt,
                                model: model,
                                items: this.selectedItems
                            })
                        });

                        const result = await response.json();
                        if (result.success) {
                            results.push({ model, data: result.data });
                        }
                    }

                    this.displayBatchResults(results);
                } catch (error) {
                    console.error('批量生成失败:', error);
                    alert('批量生成时发生错误');
                } finally {
                    batchBtn.disabled = false;
                    batchBtn.textContent = '批量生成';
                }
            }

            displayResult(data) {
                const resultsGrid = document.getElementById('resultsGrid');
                resultsGrid.innerHTML = `
                    <div class="result-card">
                        <div class="result-image">
                            <img src="${data.image_url}" alt="Generated Image" style="width: 100%; height: 100%; object-fit: cover;">
                        </div>
                        <div class="result-info">
                            <div class="result-model">${this.currentModel.toUpperCase()}</div>
                            <div class="result-prompt">${data.prompt}</div>
                        </div>
                    </div>
                `;
            }

            displayBatchResults(results) {
                const resultsGrid = document.getElementById('resultsGrid');
                resultsGrid.innerHTML = results.map(result => `
                    <div class="result-card">
                        <div class="result-image">
                            <img src="${result.data.image_url}" alt="Generated Image" style="width: 100%; height: 100%; object-fit: cover;">
                        </div>
                        <div class="result-info">
                            <div class="result-model">${result.model.toUpperCase()}</div>
                            <div class="result-prompt">${result.data.prompt}</div>
                        </div>
                    </div>
                `).join('');
            }
        }

        // 初始化分类管理器
        const categoryManager = new CategoryManager();
    </script>
</body>
</html>

